<template>
  <div class="problem-description">
    <div class="problem-info">
      <el-tag size="small" :type="getDifficultyType">{{ problem?.difficulty }}</el-tag>
      <span class="acceptance-rate">通过率: {{ problem?.acceptanceRate }}%</span>
    </div>

    <div class="description-section">
      <h3>题目描述</h3>
      <markdown-renderer :content="problem?.description || ''" />
    </div>

    <div class="format-section">
      <h3>输入格式</h3>
      <markdown-renderer :content="problem?.inputFormat || ''" />
    </div>

    <div class="format-section">
      <h3>输出格式</h3>
      <markdown-renderer :content="problem?.outputFormat || ''" />
    </div>

    <div class="examples-section">
      <h3>示例</h3>
      <div v-for="(example, index) in problem?.examples" :key="index" class="example">
        <div class="example-input">
          <h4>输入 {{ index + 1 }}</h4>
          <markdown-renderer :content="example.input" />
        </div>
        <div class="example-output">
          <h4>输出 {{ index + 1 }}</h4>
          <markdown-renderer :content="example.output" />
        </div>
        <div v-if="example.explanation" class="example-explanation">
          <h4>说明</h4>
          <markdown-renderer :content="example.explanation" />
        </div>
      </div>
    </div>

    <div class="constraints-section">
      <h3>限制条件</h3>
      <markdown-renderer :content="problem?.constraints || ''" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import MarkdownRenderer from './MarkdownRenderer.vue'

const props = defineProps<{
  problem: any
}>()

const getDifficultyType = computed(() => {
  switch (props.problem?.difficulty?.toLowerCase()) {
    case 'easy':
      return 'success'
    case 'medium':
      return 'warning'
    case 'hard':
      return 'danger'
    default:
      return 'info'
  }
})
</script>

<style scoped>
.problem-description {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.problem-info {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.acceptance-rate {
  color: var(--el-text-color-secondary);
  font-size: 14px;
}

.description-section,
.format-section,
.examples-section,
.constraints-section {
  margin-bottom: 32px;
}

h3 {
  margin: 0 0 16px;
  color: var(--el-text-color-primary);
  font-weight: 500;
}

.example {
  background: var(--el-fill-color-light);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.example:last-child {
  margin-bottom: 0;
}

.example-input,
.example-output,
.example-explanation {
  margin-bottom: 16px;
}

.example-explanation {
  margin-bottom: 0;
}

h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}
</style>
